<template>
    <div class="box">
        <van-nav-bar title="车辆检测-检测报告" class="navBar" left-arrow @click-left="back()"></van-nav-bar>
        <div class="reportDetail">
            <div class="info">
                <p><span>检测车辆：</span> <span> {{carInfo.detection_license_model}}</span></p>
                <p><span>车牌号：</span> <span>{{carInfo.detection_license_num}}</span></p>
                <p><span>车主姓名：</span> <span>{{carInfo.name}}</span></p>
                <p><span>车主电话：</span> <span>{{carInfo.open_phone}}</span></p>
                <p><span>检测员：</span> <span>{{$store.state.user.userInfo.name}}</span></p>
                <div class="line"></div>
            </div>
            <!-- 如果在setup里面使用了async和await做异步请求，则组件会变成异步组件，需要在外层用Suspense包裹 -->
            <Suspense>
                <List ref="mylist"/>
            </Suspense>
        </div>
        <!-- <footer >生成检测报告</footer> -->
        <footer>
            <van-button type="primary" @click="report()" color="rgba(94, 47, 136, 1)">生成检测报告</van-button>
            <div class="bar"></div>
        </footer>
    </div>
</template>
<script setup>
import { reactive, ref } from '@vue/reactivity';
import { Toast } from 'vant'
import { useRouter } from 'vue-router';
import {saveDetectionReport} from 'api/testing.js'
import List from './list.vue'
import { useStore } from 'vuex';
import { computed } from '@vue/runtime-core';
const router = useRouter()
const store = useStore()
const mylist = ref(null) //引用子组件

const carInfo = reactive(store.getters['testing/getCarInfo'])

const report = async () => {
    Toast.success('报告已生成！');
    //从子组件那里取得被处理过的列表
    let jsonT = mylist.value.getAllList();
    //取vuex中的客户信息
    //组装form对象
    var form = Object.create(null);
    form.name=carInfo.name;
    form.openPhone=carInfo.open_phone;
    form.detectionBoard=carInfo.detection_board;
    form.detectionLicenseModel = carInfo.detection_license_model;
    form.detectionLicenseNum = carInfo.detection_license_num;
    form.detectionVin = carInfo.detection_vin;
    form.storeId = store.state.user.userInfo.storeId
    form.jsonT=[];
    jsonT.forEach(item=>{
        let ListCategory = [];
        item.list.forEach(project=>{
            ListCategory.push({
                Name:project.detectionProjectName,
                AeraTextAll:project.text || "",
                Redioall:project.status?"1":"2",
                ImgAll:project.file || ""
            })
        })
        form.jsonT.push({
            rowElement:item.classesName,
            ListCategory
        })
    })
    form.jsonT = JSON.stringify(form.jsonT)
    console.log("准备生成：",form);
    var formData = new URLSearchParams();
    formData.append('name',form.name);
    formData.append('openPhone',form.openPhone);
    formData.append('detectionBoard',form.detectionBoard);
    formData.append('detectionLicenseModel',form.detectionLicenseModel);
    formData.append('detectionLicenseNum',form.detectionLicenseNum);
    formData.append('detectionVin',form.detectionVin);
    formData.append('storeId',form.storeId);
    formData.append('jsonT',form.jsonT);
    // 调用生成 saveDetectionReport()
    let res = await saveDetectionReport(formData);
    if(res.code==0){
        Toast.success(res.msg)
        router.replace('/home')
    }else{
        Toast.fail(res.msg)
    }
}

const back = () => {
    router.back();
}

</script>
<style lang="scss" scoped>
h4,
h6,
dt,
dd,
dl {
    margin: 0;
    padding: 0;
}
.box{
    background: #F1F5F8;
    .navBar{
        background: #fff;
    }
    .reportDetail{
        margin:.9375rem /* 15/16 */ .9375rem /* 15/16 */ 5.625rem /* 90/16 */ .9375rem /* 15/16 */;
        background: #fff;
        border-radius: .625rem /* 10/16 */;
    }
    .info {
        padding: .625rem /* 10/16 */;
        p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0 .3125rem /* 5/16 */;
            span:nth-of-type(1){
                font-size: .9375rem /* 15/16 */;
                font-family: PingFang SC;
                font-weight: 400;
                color: #49596D;
            }
            span:nth-of-type(2){
                font-size: .9375rem /* 15/16 */;
                font-family: PingFang SC;
                font-weight: 500;
                color: #101D34;
            }
        }
        .line{
            width:100%;
            height: 1px;
            background: #E5EBEF;
        }
    }
}

footer {
    width: 100%;
    height: 5.625rem /* 90/16 */;
    background: #FFFFFF;
    box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
    border-radius: .9375rem /* 15/16 */ .9375rem /* 15/16 */ 0px 0px;
    position: fixed;
    bottom: 0;
    text-align: center;
    button{
        width: 18.125rem /* 290/16 */;
        height: 2.75rem /* 44/16 */;
        margin-top:1.25rem /* 20/16 */;
        border:none;
        outline: none;
        border-radius: 1.375rem /* 22/16 */;
    }
    .bar{
        width: 8.375rem /* 134/16 */;
        height: .3125rem /* 5/16 */;
        background: #000000;
        border-radius: .15625rem /* 2.5/16 */;
        margin:13px auto 0;
    }
}
</style>